{extend name="layout" /}
{block name="head"}
<script type="text/javascript">var yyuc_jspath = "__STATIC__/";</script>
<link type="text/css" href="/WdatePicker.css">
<script type="text/javascript" src="__DATEPICKER__/WdatePicker.js"></script>
<script type="text/javascript" src="__JS__/jquery.form.js"></script>
<style>
    .red {
        color: red;
    }
    .preview {
        position: relative;
        height: 150px;
        display: flex;
        overflow: hidden;
        align-items: center;
        justify-content: center;
    }
    .preview img {
        display: block;
        object-fit: cover;
        position: absolute;
        height: 100%;
    }
    .preview .glyphicon-play-circle {
        font-size: 50px;
        color: #FFFFFF;
    }
</style>
{/block}
{block name="button"}
{if authCheck('video/edit')}
<a href="{:url('video/edit')}"  class="btn btn-mystyle pull-right margin-top">添加短视频</a>
{/if}
{/block}
{block name="content"}
<div class="search-box row">
    <form action="" method="get">
        <div class="col-md-8">
            <div class="form-group">
                <span class="pull-left form-span">标题:</span>
                <input type="text" class="form-control" style="width:220px;" placeholder="短视频标题" name="video_title" value="{$video_title?:''}">
            </div>
            <div class="form-group btn-search">
                <button class="btn btn-default" ><span class="glyphicon glyphicon-search"></span> 搜索</button>
            </div>
        </div>
    </form>
</div>
<div class="clearfix"></div>
<div class="table-margin">
    <table class="table table-bordered table-header" id="list-table">
        <thead>
        <tr>
            <td>短视频预览</td>
            <td>短视频标题</td>
            <td>绑定商品</td>
            <td>发布时间</td>
            <td class="w20">操作</td>
        </tr>
        </thead>
        <tbody>
        {foreach name="list" item="vo"}
        <tr>
            <td>
                <span class="preview">
                    <img src="{$vo['video_logo']}" onclick=window.open("{$vo['video_url']}")>
                    <span class="title-icon glyphicon glyphicon-play-circle" onclick=window.open("{$vo['video_url']}")></span>
                </span>
            </td>
            <td>{$vo['video_title']}</td>
            <td>{$vo['product_id']?:'无'}</td>
            <td>{$vo['create_time']}</td>
            <td>{$vo['operate']}</td>
        </tr>
        {/foreach}
        </tbody>
        <tfoot>
        <tr>
            <td colspan="11">
                <div class="pull-right">
                    <nav>
                        <ul class="pagination">{$list->render()}</ul>
                    </nav>
                </div>
            </td>
        </tr>
        </tfoot>
    </table>
</div>
<script type="text/javascript">
    function userDel(id){
        layer.confirm('确认删除此商品?', {icon: 3, title:'提示'}, function(index){
            //do something
            $.getJSON("{:url('user/userDel')}", {'id' : id}, function(res){
                showSuccess(res);
            });
            layer.close(index);
        })
    }
</script>
{/block}